<template>
  <div>
    <div class="flex">
      <div class="w-[250px]">
        <el-input v-model="formData.warningName" placeholder="预警名称" @input="getTableData">
        </el-input>
      </div>
      <div class="ml-4">
        <span class="mr-3">生成日期</span>
        <el-date-picker
          v-model="date"
          type="daterange"
          @change="getTableData"
          range-separator="-"
          start-placeholder="开始"
          end-placeholder="结束"
        />
      </div>
    </div>
    <div class="mt-6 flex justify-between">
      <div class="w-1/2">
        <el-table :data="tableData" :default-sort="{ prop: 'date', order: 'descending' }">
          <el-table-column type="index" label="序号" width="80" align="center" />
          <el-table-column prop="createTime" label="采集时间" sortable align="center" width="170" />
          <el-table-column prop="warningName" label="预警名称" align="center" width="120" />
          <el-table-column prop="warningContent" label="预警详情" />
          <el-table-column prop="status" label="预警状态" align="center" width="120">
            <template #default="scope">
              <span>{{ statusList[scope?.row?.status] }}</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="flex justify-end mt-3">
          <el-pagination
            v-model:current-page="formData.pageNum"
            v-model:page-size="formData.pageSize"
            layout="prev, pager, next, jumper"
            :total="pageTotal"
            @current-change="getTableData"
          />
        </div>
        事件标准：<br />
        血压过低：收缩压小于80或 舒张压小于50<br />
        血压过高：收缩压大于160或舒张压大于100<br />
        血压严重偏高：收缩压大于180或舒张压小于110<br />
      </div>
      <div class="w-1/2 px-7">
        <div>预警事件占比</div>
        <div ref="chart" class="w-[500px] h-[500px]"></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts'
import { warningListByFamily, warningRate } from '@/api/home'
import { dayjs } from 'element-plus'
import { markRaw, nextTick, onMounted, ref } from 'vue'
const date = ref('')
const { familyId } = defineProps<{
  familyId: number
}>()
const formData = ref({
  familyId,
  deviceType: '2',
  pageNum: 1,
  pageSize: 10,
  warningName: '',
  startTime: '',
  endTime: ''
})
const statusList: any = {
  1: '待审核',
  2: '待推送',
  3: '已推送',
  4: '忽略'
}
const chart = ref<HTMLDivElement | null>(null)
const myChart = ref()
const option = ref<echarts.EChartsOption>({
  tooltip: {
    trigger: 'item'
  },
  legend: {
    show: false
  },
  color: ['#eb8e60', '#5470c6'],
  series: [
    {
      type: 'pie',
      radius: ['40%', '60%'],
      avoidLabelOverlap: false,
      label: {
        show: true,
        position: 'outside'
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0
        }
      },
      data: [
        { value: 0, name: '未预警数量' },
        { value: 0, name: '预警数量' }
      ]
    }
  ]
})

onMounted(() => {
  myChart.value = markRaw(echarts.init(chart.value))
  nextTick(() => {
    initEchart()
  })
  getTableData()
})
const tableData = ref()
const pageTotal = ref(0)
const getTableData = async () => {
  if (date.value) {
    formData.value.startTime = dayjs(date.value[0]).format('YYYY-MM-DD hh:mm:ss')
    formData.value.endTime = dayjs(date.value[1]).format('YYYY-MM-DD hh:mm:ss')
  } else {
    formData.value.startTime = ''
    formData.value.endTime = ''
  }
  const res = await warningListByFamily(formData.value)
  tableData.value = res?.data.list
  pageTotal.value = res?.data.total
}
const initEchart = async () => {
  const res = await warningRate({ familyId, deviceType: '2' })
  //@ts-ignore
  option.value.series[0].data[0].value = res?.data.total - res?.data.warningCount
  //@ts-ignore
  option.value.series[0].data[1].value = res?.data.warningCount
  myChart.value.setOption(option.value, true)
  window.onresize = function () {
    myChart.value.resize()
  }
}
</script>

<style scoped lang="less">
.el-table,
.el-table__expanded-cell {
  background-color: transparent !important;
}
/deep/ .el-table th,
/deep/ .el-table tr,
/deep/ .el-table td {
  background-color: transparent !important;
  color: #fff;
}
/deep/ .el-pager li {
  margin: 0 4px;
}
</style>
